<template>
		<view style="background-color:#F1F2F4;height: 100vh;" class="flex flex-col posit-relat">
			<view class="posit-absol width-all" style="z-index: 0;">
			  <image class="width-all" style="height: 50vh;"  mode="scaleToFill" src="https://app.gluz.com.cn/uniappAssets/static/images/customer/top.png"></image>
			</view>
			<u-navbar :title="$t('我的报酬')" title-color="#fff"  :background="{'background-color':'rgba(255,255,255,0)'}"  back-icon-color="#fff" leftIcon="back" @leftClick="backEvent" rightSlot>
				<!-- <view slot="right" class="custom-icon" @click="changeSeting">
				       <image class="width-all height-all" mode="scaleToFill" src="/static/images/center/seting.png"></image>
				</view> -->
			</u-navbar> 
			<view class="bg-color-fff padd-0_15  flex-item-shrink-0 flex flex-col">
				<view class="reward_details z-index-1">
					<view class="width-all reward_detail posit-relat">
						<view class="posit-absol width-all flex flex-both" style="bottom: 32rpx;">
							<view class="" style="width: 45%; margin-left: 8%;">
								<view class="font-12 marg-b-15" style="color: #848484;">{{$t('已提现')}}</view>
								<view style="color:#FF7102;align-items: baseline;font-weight: 700;" class="flex flex-middle">
									<!-- <view class="font-12">￥</view> -->
									<view class="" style="font-size: 50rpx;line-height: 30rpx;">{{settleInfor.yitixian || 0}}</view>
									<view class="font-12">{{$t('积分')}}</view>
								</view>
							</view>
							<view class="" style="width: 45%; margin-left: 16%;">
								<view class="font-12 marg-b-15" style="color: #848484;">{{$t('当前积分')}}</view>
								<view style="color:#FF7102;align-items: baseline;font-weight: 700;" class="flex flex-middle">
									<!-- <view class="font-12">￥</view> -->
									<view class="" style="font-size:50rpx;line-height: 30rpx;">{{settleInfor.score || 0}}</view>
									<view class="font-12">{{$t('积分')}}</view>
								</view>
							</view>
						</view>
						<view class="reward_base posit-absol over-hide" style="">
							<!-- <image class="width-all height-all" mode="scaleToFill" :src='IMAGE_URL+settleInfor.avatar'></image> -->
							<u-image :src='IMAGE_URL+settleInfor.avatar' shape="circle" style="top: -4rpx;left: -4rpx; width: 130rpx;height:130rpx;border-radius: 50%;overflow: hidden;">
							  <view slot="error" style="width: 130rpx;height:130rpx;border-radius: 50%;overflow: hidden;">
								  <image class="width-all height-all" style="top:4rpx;left:4rpx"  mode="scaleToFill" :src="userInfoFullChange(userInfoFull.identity_type)"></image>
							  </view>
							</u-image>
						</view>
					</view>
				</view>
				<view class="flex flex-middle z-index-1 flex-right" style="color: #fff;font-size: 10px;">
					{{$t('平台汇率')}}1/Rmb = 10/{{$t('积分')}}
				</view>	
				<view class="flex flex-middle" style="margin-top: 32rpx;margin-bottom: 24rpx;">
					<view class="" style="width: 40rpx;height: 34rpx;">
						<image class="width-all height-all" mode="scaleToFill" src="/static/images/center/center_mx.png"></image>
					</view>
					<view class="font-16 z-index-1" style="cofont-weight: 400;color: #fff;">{{$t('提现记录')}}</view>
				</view>
			</view>
			<view class="z-index-1 padd-b-15 marg-0_15 bg-color-fff border-radius-16 over-hide" style="min-height:0;height: 50vh;">
				<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
					<view class="flex flex-col  padd-0_20">
						<view class="padd-15_0" v-for="(item, index) in dataList" :key="index">
							<view class="flex flex-both flex-middle" >
								<view class="" style="font-weight: 400;width: 60%;">
									<view class="font-13 flex" style="color: #1D1D1D;margin-bottom: 14rpx;">
									<view class="over-hide-1">{{lang=='zh'?item.user.username:item.user.username_ru}} </view>
									
									</view>
									<view class="font-11" style="color:#999999">{{item.create_at}}</view>
								</view>
								<view style="color:#FF7102;align-items: baseline; font-weight: 700;" class="flex flex-middle">
									<!-- <view class="font-16">-</view> -->
									<view class="font-16 marg-0_10">{{item.score}}</view>
									<view class="font-10" style="font-weight: 400;">{{$t('积分')}}</view>
								</view>
								
							</view>	
							<view style="color: #FF0000;font-size: 10px;">{{$t('申请提现成功')}}</view>
						</view>
					</view>
				</mescroll-uni>
			
			</view>
			<view class="flex">
				<u-button hover-class="none" shape="circle" style="z-index: 0;width:70%;"  class="font-14 sub" :loading="paymentClose_loading" :disabled="paymentClose_loading" @click="paymentChange">{{$t('申请提现')}}</u-button>
			</view>
			<view class="width-all flex-center" style="display: flex;color:#343434;font-size:12px;text-align: center;">
				{{$t('注')}}:{{$t('每月20日至月底可提现')}}
			</view>
			<u-popup v-model="payment_show" mode="center" width="90%" height="680rpx" class="jionMeeting_box" >
				<view class="posit-relat">
					<view class="posit-absol" style="width: 240rpx;height: 240rpx;top: -120rpx;left:calc(50% - 120rpx);">
						<image class="width-all height-all" style="" mode="widthFix"
							src="/static/images/user/newUI/card.png" alt="" />
					</view>
					<view style="padding-top: 120rpx;color: #005692;" class="u-text-center">
						<view style="color: #005692;font-size: 40rpx;font-weight: bold;">{{$t('提现申请')}}</view>
						<view class="flex flex-both flex-middle tixian_box" :style="{'width':lang=='zh'?'70%':'80%'}" style="margin-top: 60rpx;">
							<view>{{$t('剩余积分')}}</view>
							<view>{{settleInfor.score || 0}}{{$t('积分')}}</view>
						</view>
						<view class="flex flex-both flex-middle tixian_box" :style="{'width':lang=='zh'?'70%':'80%'}"  style="margin-top: 40rpx;" :class="{column:lang=='ru'}">
							<view>{{$t('提现积分')}}</view>
							<view class="flex flex-middle tixian" :class="lang=='zh'?'':'width-all'">
								<u-input type="number" :clearable="false" :class="lang=='zh'?'u-text-center':'u-text-left'"  :style="{'width':lang=='zh'?'200rpx':'100%'}" style="border-bottom: 1px solid #999999;font-size: 10px;" v-model="meetingNum" :placeholder="$t('输入提现的积分')" class="no-icon" placeholder-style="text-align: left;" />
								<view>/{{$t('积分')}}</view>
							</view>
						</view>
						<view class="marg-t-20" style="color: #EE1C25;font-size: 12px;font-weight: bold;" @click="meetingNumAll">{{$t('全部提现')}}</view>
						<u-button hover-class="none"  shape="circle" style="z-index: 0;width: 70%;margin-top: 56rpx;"  class="font-14 subbox marg-t-20"  :loading="meeting_loading" :disabled="meeting_loading" @click="meeting_sub">{{$t('提交')}}</u-button>
					</view>
					
				</view>
			</u-popup>
			<u-popup v-model="selectTimes_show" :mask-close-able="false" mode="center" width="90%" height="600rpx" class="selectVoice_boxs" >
				<view class="posit-relat">
					<view class="posit-absol" style="width: 240rpx;height: 240rpx;top: -120rpx;left:calc(50% - 120rpx);">
						<image class="width-all height-all" style="" mode="widthFix"
							src="/static/images/user/newUI/cards.png" alt="" />
					</view>
					<view style="padding-top: 120rpx;" class="u-text-center">
						<view style="color: #005692;font-size: 40rpx;font-weight: bold;">{{$t('银行卡缺失')}}</view>
						<view style="color: #005692;font-size: 30rpx;font-weight: bold;margin-top: 60rpx;">{{$t('暂无绑定银行卡,请先进行绑定')}}</view>
						<view style="width: 76%;color: #343434;margin: auto;margin-top:40rpx;font-size: 10px;white-space: normal;word-wrap:break-word;word-break: break-all;">{{$t('为了您的财产安全,避免给您造成财产损失,请绑定自己的银行卡')}}</view>
						<view style="z-index: 0;margin-top: 56rpx;" class="flex flex-both">
							<u-button hover-class="none"  shape="circle" style="width:45%;"   class="font-14 subp"  :loading="selectVoice_loading" :disabled="selectVoice_loading" @click="selectVoice_changetimes()">{{$t('绑定银行卡')}}</u-button>
						</view>
						
					</view>
					
				</view>
			</u-popup>
		</view>	
</template>

<script>
	import { HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL,IMAGE_PIC } from "@/config/app"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				dataList:[],
				cunentge:3,
				///语言
				lang: getApp().globalData.lang,
				IMAGE_URL,
				settleInfor:{
					score:0,
					yitixian:0
				},
				userVatar:[
					{label:'供应商',value:'0',avatar:'/uploads/20240923/4104dd20a0d9ea5679f4fc54015cd55b.png'},
					{label:'经销商',value:'1',avatar:'/uploads/20240923/4104dd20a0d9ea5679f4fc54015cd55b.png'},
					{label:'货代公司',value:'2',avatar:'/uploads/20240923/249a0c604d899295f7339462b11867a1.png'},
					{label:'采购商',value:'3',avatar:'/uploads/20240923/3c6bc313e194038a888735ae338c2e9c.png'},
					{label:'服务公司',value:'4',avatar:'/uploads/20240923/13ac638916a3bcbc54f1f22ee360bf3e.png'},
					{label:'报关公司',value:'5',avatar:'/uploads/20240923/249a0c604d899295f7339462b11867a1.png'},
					{label:'运输公司',value:'6',avatar:'/uploads/20240923/04cd9814bfe6b8a93c775b094bc02394.png'},
					{label:'国际物流公司',value:'7',avatar:'/uploads/20240923/04cd9814bfe6b8a93c775b094bc02394.png'},
					{label:'司机',value:'8',avatar:'/uploads/20240923/04cd9814bfe6b8a93c775b094bc02394.png'},
					{label:'服务商',value:'9',avatar:'/uploads/20240923/13ac638916a3bcbc54f1f22ee360bf3e.png'},
					{label:'个人',value:'10',avatar:'/uploads/20240923/04cd9814bfe6b8a93c775b094bc02394.png'}
				],
				downOption:{
					textLoading:this.$t('加载中'),
					textSuccess:this.$t('加载成功'),
					textInOffset: this.$t('下拉刷新'), 
					textOutOffset: this.$t('释放更新'), 
				},
				upOption:{
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					// auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					// offset: 80, // 距底部多远时(默认80),触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")
					// toTop:{
					// 	src:''
					// },
					textNoMore: this.$t('没有更多了'), // 没有更多数据的提示文本
					textLoading:this.$t('加载中'),
					textSuccess:this.$t('加载成功'),
					empty: {
						// icon: "", // 图标路径
						tip: this.$t('暂无相关数据')
					}
				},
				userInfoFull:{},
				paymentClose_loading:false,
				payment_show:false,
				meeting_loading:false,
				selectTimes_show:false,
				selectVoice_loading:false,
				meetingNum:''
			}
		},
		onLoad() {
			this.userInfoFull = uni.getStorageSync('userInfoFull')
		},
		onShow() {
			this.userInfoFull = uni.getStorageSync('userInfoFull')
		},
		methods: {
			selectVoice_changetimes(){
				this.selectTimes_show=false
				this.$u.route('/pages/user/intentionSetting/intentionSetting')
			},
			meetingNumAll(){
				this.meetingNum=this.settleInfor.score
			},
			paymentChange(){
				if(!this.settleInfor||this.settleInfor.score==0){
					uni.showModal({
							content: this.$t('暂无积分'),
							showCancel: false,
							confirmText: this.$t('确定'),
						})
						return false
				}
				this.payment_show=true
			},
			meeting_sub(){
				if(this.meetingNum==''){
					uni.showModal({
							content: this.$t('输入提现的积分'),
							showCancel: false,
							confirmText: this.$t('确定'),
						})
						return false
				}
				if(this.meetingNum!=''&&this.meetingNum==0){
					uni.showModal({
							content: this.$t('输入提现的积分'),
							showCancel: false,
							confirmText: this.$t('确定'),
						})
						return false
				}
				if(this.meetingNum>0&&(this.meetingNum>this.settleInfor.score)){
					uni.showModal({
							content: this.$t('当前积分不足'),
							showCancel: false,
							confirmText: this.$t('确定'),
						})
						return false
				}
				if(this.meetingNum>0&&(this.meetingNum>this.settleInfor.score)){
					uni.showModal({
							content: this.$t('当前积分不足'),
							showCancel: false,
							confirmText: this.$t('确定'),
						})
						return false
				}
				this.meeting_loading=true
				this.$u.api.user.tixian_confirm({
					score:this.meetingNum
				}).then(res => {
					this.meeting_loading=false
					this.payment_show=false
					console.log('提现是否绑定银行卡',res)
					if(res.bank_number==''){
						this.selectTimes_show=true
						return false
					}
					
					uni.showToast({
						title: this.$t("提交成功"),
						icon: "none"
					})
					this.dataList=[]
					this.mescroll.resetUpScroll()
				}).catch((err)=>{
					this.meeting_loading=false
					this.payment_show=false
					this.dataList=[]
					this.mescroll.resetUpScroll()
				})
			},
			userInfoFullChange(v_id){
				let inforImg=''
				let inforList=this.userVatar.filter((item)=>{
					if(v_id==item.value){
						return item
					}
				})
				return  inforImg+this.IMAGE_URL+inforList[0].avatar
			},
			//返回
			backEvent() {
				uni.navigateBack({
					delta: 1
				})
			},
			//我的意向设置--跳转
			changeSeting(){
				let typeUrl='/pages/user/intentionSetting/intentionSetting'
				uni.navigateTo({
					url: typeUrl
				})
			},
			upCallback(page) {
				setTimeout(()=>{
					this.$u.api.user.tixian_log({
						page:page.num
					}).then(res => {
						if(!res.list)res.list=[];
						this.settleInfor=res.user
						this.mescroll.endBySize(res.list.length, res.count); //必传参数(当前页的数据个数, 总数据量)
						//设置列表数据
						if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
						this.dataList=this.dataList.concat(res.list); //追加新数据
					})
				},500)
			}
		}
	
	}
</script>

<style scoped>
	.selectVoice_boxs /deep/.u-mode-center-box{
		background-image: url(/static/images/user/newUI/pingjia.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 32rpx;
	}
	.selectVoice_boxs /deep/.uni-scroll-view{
		overflow: visible !important;
	}
	.reward_base{
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
        border: 4rpx solid #fff;
		top: 0;
		left: calc(50% - 65rpx);
	}
	.reward_details{
		
	}
	.reward_detail{
		background-image: url('/static/images/center/center_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 160rpx;
		height: 240rpx;
		background-position: bottom;
	}
	/deep/ .u-border-bottom:after {
	    border-bottom-width: 0 !important;
	}
	.custom-icon{
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}
	.typeSeting{
		color: #fff !important;
	}
	/deep/.u-navbar-content-title{
		width: 80% !important;
		left:10% !important;
		right:10% !important;
	}
	/deep/.u-image__error{
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		top: -4rpx;
		left: -4rpx;
	}
	.tixian /deep/.uni-input-placeholder{
		font-size: 10px;
		line-height: 12px;
		white-space: pre-line;
	}
	.tixian_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: auto;
	}
	.sub {
		background-image: linear-gradient(to bottom, #30F998, #0D7DE2);
		text-align: center;
		color: #ffffff;
		margin: auto;
		margin-top: 15px;
		margin-bottom: 10px;
	}
	.subbox {
		background-image: linear-gradient(to right, #B9E2FF, #0295FA);
		text-align: center;
		color: #ffffff;
	}
	.jionMeeting_box /deep/.u-mode-center-box{
		background-image: url(/static/images/user/newUI/pingjia.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 32rpx;
	}
	.jionMeeting_box /deep/.uni-scroll-view{
		overflow: visible !important;
	}
	.column {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.subp {
		background-image: linear-gradient(to right, #B9E2FF, #0295FA);
		text-align: center;
		color: #ffffff;
		margin: auto;
		margin-top: 15px;
		margin-bottom: 10px;
	}
</style>